<template>
  <view class="page p_t_20" v-if="list.length>0||topList.length>0">
    <view class="header m_t_20 m_b_20">
      <!--            <text> 2024-04-02 更新 </text>-->
      <u-grid col="3" border>
        <u-grid-item @click="handleChange(1)">
          <text class="grid-text c_f" :style="{color:activeIndex==1?'#F2DA5F':''}">日榜</text>
        </u-grid-item>
        <u-grid-item @click="handleChange(2)">
          <text class="grid-text c_f" :style="{color:activeIndex==2?'#F2DA5F':''}">周榜</text>
        </u-grid-item>
        <u-grid-item @click="handleChange(3)">
          <text class="grid-text c_f" :style="{color:activeIndex==3?'#F2DA5F':''}">月榜</text>
        </u-grid-item>
      </u-grid>
    </view>
    <view class="top">
      <view class="top-item" @click="handleToUserHome(topList[0].userId)">
        <!-- <image class="top-item-king" src="/static/img/11.png"></image> -->
        <!--                <image class="top-item-avatar" :src="topList[0].avatar"></image>-->
        <view class="top-item-avatar">
          <image class="top-item-king" src="/static/img/11.png"></image>
          <u-avatar :src="topList[0].avatar"></u-avatar>
        </view>
        <text class="top-item-name">{{topList[0].nickName}}</text>
        <!--                <text class="top-item-score">{{topList[0].allAmount}}</text>-->
        <text class="ranking-list-score" v-if="activeIndex==1">{{topList[0].dayAmount}}</text>
        <text class="ranking-list-score" v-if="activeIndex==2">{{topList[0].weekAmount}}</text>
        <text class="ranking-list-score" v-if="activeIndex==3">{{topList[0].monthAmount}}</text>
      </view>
      <view class="top-item" @click="handleToUserHome(topList[1].userId)">

        <!--                <image class="top-item-avatar" :src="topList[1].avatar"></image>-->
        <view class="top-item-avatar">
          <u-avatar :src="topList[1].avatar"></u-avatar>
          <image class="top-item-king" src="/static/img/22.png"></image>
        </view>
        <text class="top-item-name">{{topList[1].nickName}}</text>
        <!--                <text class="top-item-score">{{topList[1].allAmount}}</text>-->
        <text class="ranking-list-score" v-if="activeIndex==1">{{topList[1].dayAmount}}</text>
        <text class="ranking-list-score" v-if="activeIndex==2">{{topList[1].weekAmount}}</text>
        <text class="ranking-list-score" v-if="activeIndex==3">{{topList[1].monthAmount}}</text>
      </view>
      <view class="top-item" @click="handleToUserHome(topList[2].userId)">

        <!--                <image class="top-item-avatar" :src="topList[2].avatar"></image>-->
        <view class="top-item-avatar">
          <u-avatar :src="topList[2].avatar"></u-avatar>
          <image class="top-item-king" src="/static/img/33.png"></image>
        </view>
        <text class="top-item-name">{{topList[2].nickName}}</text>
        <!--                <text class="top-item-score">{{topList[2].allAmount}}</text>-->
        <text class="ranking-list-score" v-if="activeIndex==1">{{topList[2].dayAmount}}</text>
        <text class="ranking-list-score" v-if="activeIndex==2">{{topList[2].weekAmount}}</text>
        <text class="ranking-list-score" v-if="activeIndex==3">{{topList[2].monthAmount}}</text>
      </view>
    </view>
    <view class="ranking">
      <view class="rangking-title">
        <text>排名</text>
        <text>昵称</text>
        <text>订单额</text>
      </view>
      <view class="ranking-list">
        <view class="ranking-list-item" v-for="(item, key) in list" :key="key" @click="handleToUserHome(item.userId)">
          <text class="ranking-list-number">{{key + 4}}</text>
          <view class="ranking-list-nickname m_l_10">
            <u-avatar :src="item.avatar"></u-avatar>
            <text>{{ item.nickName }}</text>
          </view>
          <text class="ranking-list-score" v-if="activeIndex==1">{{item.dayAmount}}</text>
          <text class="ranking-list-score" v-if="activeIndex==2">{{item.weekAmount}}</text>
          <text class="ranking-list-score" v-if="activeIndex==3">{{item.monthAmount}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getRankingsApi } from "@/sheep/api";

export default {
  data() {
    return {
      topList: [],
      list: [],
      activeIndex: 1,
      type: "day_amount",
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    getList() {
      getRankingsApi({ type: this.type }).then((res) => {
        if (res.data.length > 3) {
          this.topList = res.data.slice(0, 3);
          this.list = res.data.slice(3);
        } else {
          this.topList = res.data;
          this.list = [];
        }
      });
    },
    handleChange(index) {
      this.activeIndex = index;
      if (index == 1) {
        this.type = "day_amount";
      }
      if (index == 2) {
        this.type = "week_amount";
      }
      if (index == 3) {
        this.type = "month_amount";
      }
      this.getList();
    },
    handleToUserHome(userId) {
      uni.navigateTo({
        url: "/pages/userHome/index?userId=" + userId,
      });
    },
    goWaiter() {
      uni.navigateTo({
        url: "/pages/waiter/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .u-border-right {
  height: 40rpx;
}
.page {
  min-height: calc(100vh);
  padding-bottom: 20rpx;
  background: #222020;

  .header {
    width: 100vw;
    height: 100rpx;
    line-height: 80rpx;
    color: #fff;
    font-size: 12px;
    text-align: center;
  }

  .top {
    width: 660rpx;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .top-item {
      width: 200rpx;
      height: 320rpx;
      display: flex;
      flex-direction: column;
      background: #000000;
      // position: relative;
      align-items: center;
      border-radius: 100rpx 100rpx 0 0;
      color: #fff;

      &:nth-child(1) {
        height: 400rpx;
      }

      &:nth-child(2) {
        height: 360rpx;
      }

      .top-item-avatar {
        position: relative;
        margin-top: 60rpx;
        // background-color: pink;
        .top-item-king {
          width: 110rpx;
          height: 110rpx;
          position: absolute;
          top: -17rpx;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      .top-item-name {
        margin: 10rpx 0;
        font-size: 28rpx;
      }

      .top-item-score {
        font-size: 24px;
        color: #e28935;
      }
    }
  }

  .ranking {
    width: 700rpx;
    border-radius: 30rpx;
    margin: auto;
    background: #fff;
    box-sizing: border-box;
    padding: 20rpx;

    .rangking-title {
      display: flex;
      font-size: 14px;
      color: #555;
      height: 50rpx;
      line-height: 50rpx;

      text {
        display: block;
        //width: 70rpx;

        &:nth-child(2) {
          //width: calc(100% - 140rpx);
          margin-left: 20rpx;
          flex: 1;
        }
      }
    }

    .ranking-list-item {
      height: 110rpx;
      display: flex;
      align-items: center;
      font-size: 14px;

      .ranking-list-number {
        display: block;
        //width: 70rpx;
        color: #777;
      }

      .ranking-list-score {
        display: block;
        //width: 70rpx;
        color: #e28935;
        font-size: 16px;
      }

      .ranking-list-nickname {
        display: flex;
        align-items: center;
        width: calc(100% - 140rpx);

        image {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }

        text {
          width: auto;
        }
      }
    }
  }
}
</style>
